Screen এর মধ্যে ডেটা পাস করা এবং Route Parameters ব্যবহার

React Native অ্যাপ্লিকেশনে বিভিন্ন স্ক্রীনের মধ্যে ডেটা পাস করার জন্য React Navigation লাইব্রেরি ব্যবহৃত হয়। React Navigation এর মাধ্যমে আপনি স্ক্রীনের মধ্যে ডেটা পাস করতে পারেন এবং বিভিন্ন স্ক্রীনে পারামিটার (Route Parameters) পাঠাতে পারেন। নিচে React Navigation ব্যবহার করে Screen এর মধ্যে ডেটা পাস এবং Route Parameters এর ব্যবহার বর্ণনা করা হয়েছে।

React Navigation সেটআপ

প্রথমে, React Navigation লাইব্রেরি ইনস্টল করতে হবে। যদি আপনি এটি ইতিমধ্যেই ইনস্টল না করে থাকেন, তবে নিচের কমান্ডটি ব্যবহার করে ইনস্টল করতে পারেন:

npm install @react-navigation/native
npm install @react-navigation/stack
npm install react-native-screens react-native-safe-area-context

এবং তারপর, react-native-gesture-handler এবং react-native-reanimated ইনস্টল করতে হবে যদি আপনার প্রকল্পে ইতিমধ্যে না থাকে।

npm install react-native-gesture-handler react-native-reanimated

এখন React Navigation সঠিকভাবে সেটআপ হয়ে গেলে, আপনি স্ক্রীনগুলোর মধ্যে ডেটা পাস করতে এবং Route Parameters ব্যবহার করতে পারবেন।

Screen এর মধ্যে ডেটা পাস করা

React Navigation ব্যবহার করে স্ক্রীনের মধ্যে ডেটা পাস করার জন্য navigation.navigate() এবং route.params ব্যবহার করা হয়। এখানে আমরা দেখব কীভাবে একটি স্ক্রীন থেকে অন্য স্ক্রীনে ডেটা পাঠানো এবং গ্রহণ করা যায়।

১. ডেটা পাঠানো (Passing Data)

Screen 1 (HomeScreen) থেকে Screen 2 (DetailsScreen) এ ডেটা পাঠানো হবে।

// HomeScreen.js
import React from 'react';
import { Button, View, Text } from 'react-native';

const HomeScreen = ({ navigation }) => {
  const dataToPass = {
    name: 'John Doe',
    age: 25,
  };

  return (
    <View>
      <Text>Welcome to Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => {
          // Passing data via route params
          navigation.navigate('Details', { userData: dataToPass });
        }}
      />
    </View>
  );
};

export default HomeScreen;

এই কোডে, আমরা HomeScreen থেকে DetailsScreen এ একটি অবজেক্ট (যেমন userData) পাঠাচ্ছি।

২. ডেটা গ্রহণ (Receiving Data)

DetailsScreen এ route.params ব্যবহার করে ডেটা গ্রহণ করা হবে।

// DetailsScreen.js
import React from 'react';
import { View, Text } from 'react-native';

const DetailsScreen = ({ route }) => {
  const { userData } = route.params;  // Receiving data passed via route params

  return (
    <View>
      <Text>Name: {userData.name}</Text>
      <Text>Age: {userData.age}</Text>
    </View>
  );
};

export default DetailsScreen;

এখানে, আমরা route.params এর মাধ্যমে HomeScreen থেকে পাঠানো ডেটা গ্রহণ করছি এবং সেগুলি UI তে প্রদর্শন করছি।

Route Parameters ব্যবহার

Route Parameters হল URL এর অংশ যেখানে ডাইনামিক ডেটা পাঠানো হয়। React Navigation এর মাধ্যমে স্ক্রীনগুলির মধ্যে URL বা Route Parameter পাস করা যায়, যা URL এর অংশ হিসেবে কাজ করে।

১. Route Parameter পাঠানো (Passing Route Parameters)

React Navigation এর Stack Navigator ব্যবহৃত হলে, আপনি Route Parameters এইভাবে পাঠাতে পারেন।

// HomeScreen.js
import React from 'react';
import { Button, View, Text } from 'react-native';

const HomeScreen = ({ navigation }) => {
  return (
    <View>
      <Text>Home Screen</Text>
      <Button
        title="Go to Profile"
        onPress={() => {
          // Passing route parameters
          navigation.navigate('Profile', { userId: '1234', username: 'johndoe' });
        }}
      />
    </View>
  );
};

export default HomeScreen;

এই উদাহরণে, আমরা userId এবং username নামক Route Parameters পাঠাচ্ছি।

২. Route Parameter গ্রহণ (Receiving Route Parameters)

যখন ProfileScreen এ userId এবং username Parameters পৌঁছাবে, তখন আমরা সেগুলি route.params থেকে গ্রহণ করতে পারব।

// ProfileScreen.js
import React from 'react';
import { View, Text } from 'react-native';

const ProfileScreen = ({ route }) => {
  const { userId, username } = route.params;  // Receiving route parameters

  return (
    <View>
      <Text>User ID: {userId}</Text>
      <Text>Username: {username}</Text>
    </View>
  );
};

export default ProfileScreen;

এখানে, আমরা route.params ব্যবহার করে HomeScreen থেকে পাঠানো userId এবং username গ্রহণ করছি এবং UI তে প্রদর্শন করছি।

Stack Navigator কনফিগারেশন

এখন, উল্লিখিত HomeScreen এবং ProfileScreen স্ক্রীনগুলির মধ্যে নেভিগেশন কনফিগার করতে হবে।

// App.js
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './HomeScreen';
import ProfileScreen from './ProfileScreen';

const Stack = createStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Profile" component={ProfileScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

এখানে, আমরা createStackNavigator ব্যবহার করে HomeScreen এবং ProfileScreen এর মধ্যে নেভিগেশন সেটআপ করেছি।

সারাংশ

• Screen এর মধ্যে ডেটা পাস করা: React Navigation ব্যবহার করে navigation.navigate() এর মাধ্যমে স্ক্রীনগুলির মধ্যে ডেটা পাস করা হয় এবং route.params ব্যবহার করে ডেটা গ্রহণ করা হয়।
• Route Parameters: Route Parameters হল ডাইনামিক ডেটা যা URL-এর অংশ হিসেবে স্ক্রীনগুলিতে পাঠানো হয়। React Navigation এ navigation.navigate() ব্যবহার করে Route Parameters পাঠানো হয় এবং route.params দিয়ে সেগুলি গ্রহণ করা হয়।

এই প্রক্রিয়া অনুসরণ করে, আপনি React Native অ্যাপ্লিকেশনে স্ক্রীনগুলির মধ্যে ডেটা সঞ্চালন করতে এবং পারামিটার ব্যবহার করতে পারবেন।